import React from 'react'
import {Card,Button, Icon,Modal} from 'antd'
import './ui.less'
export default class Modals extends React.Component{
    state={
        showModal1:false
    }
    handleOpen=(type)=>{
        this.setState({
            [type]:true
        });
    }
    render(){
        return(
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal2')}>自定义页面文字</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal3')}>顶部20px</Button>
                    <Button type="primary" onClick={()=>this.handleOpen('showModal4')}>水平垂直居中</Button>
                </Card>
                <Modal
                    title="Basic Modal"
                    visible={this.state.showModal1}
                    onCancel={()=>{
                        this.setState({
                            showModal1:false
                        });
                    }}
                    >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
                <Modal
                    title="Basic Modal"
                    visible={this.state.showModal2}
                    okText="好的"
                    cancelText="算了"
                    onCancel={()=>{
                        this.setState({
                            showModal2:false
                        });
                    }}
                    >
                </Modal>
            </div>
        );
    }
}